<!--
 * @Author: byron
 * @Date: 2021-10-18 08:35:55
 * @LastEditTime: 2022-05-09 17:19:36
-->
<template>
    <div class="tagescard-main" v-if="visible">
        <div class="icon-warp">
            <Icon type="" @iconHandle="iconHandle"></Icon>
        </div>
        <div class="title-warp">
            <i
                class="iconfont icon-tag3"
                style="
                    color: #00d2d3;
                    display: inline-block;
                    vertical-align: center;
                    margin-right: 8px;
                    font-size: 20px;
                "
            ></i>
            <span style="vertical-align: center; font-size: 18px"
                >热门标签</span
            >
        </div>
        <div class="tags-container">
            <ul @click="goChoice">
                <li v-for="item in tags" :data-id="item.id" :key="item.id">
                    #{{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tags: [],
        }
    },
    methods: {
        iconHandle() {
            this.$store.commit('app/TOGGLE_TAGS')
        },
        closeHandle() {
            this.visible = false
        },
        goChoice(e) {
            console.log(e.target.dataset.id, 'test')
            this.$router.push({
                name: 'choice',
                params: {
                    tagId: e.target.dataset.id + '',
                },
            })
        },
    },
    computed: {
        visible() {
            return this.$store.getters.tags
        },
    },
    async created() {
        const tagHotList = this.$store.getters.tagHotList
        if (tagHotList.length == 0) {
            await this.$store.dispatch('tag/getHotTag')
            this.tags = this.$store.getters.tagHotList
        } else {
            this.tags = tagHotList
        }
    },
}
</script>
<style lang="less" scoped>
@keyframes other-card-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.tagescard-main {
    position: relative;
    padding: 20px;
    max-width: 330px;
    margin: auto;
    opacity: 0;
    animation: other-card-fade 0.6s ease-out 0.6s 1 forwards;

    .icon-warp {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1;
    }
    h2 {
        position: relative;
        margin: 0;
        text-align: left;
        font-size: 20px;
        color: #333;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e8ed;
    }
    h2::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 40px;
        height: 1px;
        background-color: #00a4ff;
    }
    .tags-container {
        padding: 15px;
        border-top: 1px;
        border-bottom: 1px solid #e5e8ed;
        ul {
            display: flex;
            flex-wrap: wrap;
            li {
                position: relative;
                padding: 0 10px;
                cursor: pointer;
                margin-right: 10px;
                margin-bottom: 10px;
                height: 34px;
                background-color: #fff;
                color: #666;
                font-size: 14px;
                line-height: 32px;
                border: 1px solid #e8ecf3;
                border-radius: 6px;
            }
            li:hover {
                z-index: 1;
                background-color: transparent;
                transition: all 0.8s;
                color: #e5e5e5;
            }
            li:hover {
                z-index: 1;
                background-color: transparent;
                color: var(--default);
            }

            // li::before,
            // li::after {
            //     content: '';
            //     position: absolute;
            //     left: 0px;
            //     top: 0;
            //     width: 0;
            //     right: 0;
            //     height: 100%;
            //     z-index: -2;
            //     border-radius: 6px;
            // }
            // li::before {
            //     background-color: red;
            //     z-index: -1;
            //     transition: all 1s;
            // }
            // li:hover::after,
            // li:hover::before {
            //     width: 100%;
            // }
        }
    }
}
</style>
